﻿<template>
  <el-table
    :data="tableRecordDetails"
    stripe
    style="width: 100%"
    table-layout="fixed"
    :fit="true"
    :default-sort="{ prop: 'createTime', order: 'descending' }"
  >
    <el-table-column type="index" label="" />
    <el-table-column
      prop="sensorCode"
      label="传感器码"
      width="250"
      sortable
      show-overflow-tooltip
    />
    <el-table-column prop="point" label="检定点" sortable />
    <el-table-column prop="standardValueReal" label="标准值" :formatter="formatNumber" />
    <el-table-column prop="sensorValueReal" label="传感器值" :formatter="formatNumber" />
    <el-table-column prop="diffValue" label="误差">
      <template v-slot="scope">
        <el-text class="mx-1" :type="scope.row.isQualified ? 'success' : 'danger'">
          {{ scope.row.diffValue.toFixed(2) }}
        </el-text>
      </template>
    </el-table-column>
    <el-table-column prop="qualifiedError" label="允许误差">
      <template v-slot="scope">± {{ scope.row.qualifiedError.toFixed(2) }}</template>
    </el-table-column>
    <el-table-column prop="createTime" label="检定时间" sortable :formatter="formatDate" />
  </el-table>
</template>
<script setup lang="ts">
import { EventToken } from "@/enums/business/eventToken.enum";
import DetectApi from "@/api/business/detect.api";
import { format } from "date-fns";
import { useSignalRStore } from "@/store/modules/signalr.store";
import { SignalrToken } from "@/enums/business/signalrToken.enum";
import { detectRecordDetail } from "@/types/business/record";

const detectStartBus = useEventBus<string>(EventToken.DetectStart);

const tableRecordDetails = ref<detectRecordDetail[]>([]);
onMounted(() => {
  detectStartBus.on(handleDetectStarted);
  DetectApi.getRecordDetailCache().then((res) => {
    tableRecordDetails.value = res;
  });
});
onUnmounted(() => {
  detectStartBus.off(handleDetectStarted);
});

const handleDetectStarted = () => {
  tableRecordDetails.value = [];
};

const formatDate = (row, column, cellValue: Date) => {
  if (!cellValue) return "";

  // 检查是否为有效的日期
  const date = new Date(cellValue);
  if (isNaN(date.getTime())) return "";

  // 使用date-fns的format函数，格式字符串与期望输出一致
  return format(date, "yyyy-MM-dd HH:mm:ss");
};

const formatNumber = (row, column, cellValue: number) => {
  if (!cellValue) return "";
  // 使用date-fns的format函数，格式字符串与期望输出一致
  return cellValue.toFixed(2);
};

/*const filterSensorCodes = ref([]);
watch(
  tableRecordDetails,
  (newValue) => {
    let sensorCodes = newValue.map((item) => item.sensorCode);
    sensorCodes = [...new Set(sensorCodes)];
    sensorCodes.forEach((item) => {
      filterSensorCodes.value.push({
        value: item,
        text: item,
      });
    });
  },
  { immediate: true }
);*/

// region signalR

const signalrStore = useSignalRStore();
signalrStore.subscribe(SignalrToken.RecordDetails, (data: RecordDetail[]) => {
  console.log("🎉 RecordDetails", data);
  tableRecordDetails.value.push(...data);
});

// endregion
</script>
<style scoped lang="scss"></style>
